<template>
  <div>
  <todo-list></todo-list>
  </div>
</template>

<script>
import TodoList from "./components/TodoList";
export default {
  /**
   * provide 提供 inject注入
   *
   * 组件化
   * 把项目，以视图为线索，切割成无数的碎片
   * 这些碎片组成我们想要的样子和功能
   * 这些碎片 在其他不同的碎片中进行依赖，最终组合成一个页面交互的整体
   * 这个整体就是组件树
   *
   * 组件A -》其他任何组件进行依赖 -》复用性
   * 组件A -》数据来源是依赖组件提供的 -》可配置性
   * 原则上 组件可以无限极的被依赖 ->数据就可以无限极的被传递下去——》单向数据流
   * 导致数据将穿过所有依赖关系中的组件，造成了许多层组件并未使用的数据出现
   * 组件中对属性进行强制注册
   *
   * 组件依赖关系要变得简单 就是 组件之间的嵌套关系不能过度深了
   * 组件设计的时候就要注意组件的扁平化
   *
   * provide 提供 inject注入就可以解决这个问题
   * 在父组件provide 注入数据
   * 在子组件inject 获取数据
   * 这个数据绑定的时候并不是响应式的
   *
   * 父组件并不知道谁使用了provide数据
   * 子组件也不知道谁提供了这个数据
   *
   * 使用provide 提供 inject注入
   * 1. 在一个组件体系下，如果有深度嵌套
   *
   */
  name: "App",
  components: {
    TodoList,
  },
};
</script>

<style>

</style>
